<template>
  <div class="login-form">
    <el-form v-model="form" class="form" ref="formRef">
      <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名">
          <template #prefix>
            <el-icon>
              <User/>
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
            v-model="form.password"
            show-password
            placeholder="请输入密码"
        >
          <template #prefix>
            <el-icon>
              <Lock/>
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="!currentBtn" style="display: flex; justify-content: space-between">
        <el-input
            v-model="form.code"
            auto-complete="off"
            placeholder="验证码"
            style="width: 60%"
        >
          <template #prefix>
            <el-icon>
              <Key/>
            </el-icon>
          </template>
        </el-input>
        <div class="code-warp" style="">
           <img :src="codeUrl" @click="getCode" class="code-img" />
          <div class="img-loading pointer">
            <div v-if="codeTime !== 0">{{codeTime}}s</div>
            <el-icon v-else @click="getCode"><RefreshRight /></el-icon>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="form.rememberMe" v-if="!currentBtn"
        >记住密码
        </el-checkbox>
        <el-button
            type="primary"
            class="login-btn"
            :loading="loading"
            @click="handleLogin"
        >{{ currentBtn ? "注册" : "登录" }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import {getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
import {Key, Lock, RefreshRight, User} from "@element-plus/icons-vue";
import {doLogin, getCodeImg, register} from "@/api/login";
import {decrypt, encrypt} from "@/utils/jsencrypt";
import router from "@/router";
import {message} from "ant-design-vue";

const {proxy} = getCurrentInstance();
const loading = ref(false);
const formRef = ref(null);
const form = reactive({
  username: "admin",
  password: "123456",
  rememberMe: false,
  code: "",
  uuid: "",
});
onMounted(() => {
  getCode()
})
const handleLogin = async () => {

  // loading.value = true;
  //   登录业务
  if (!props.currentBtn) {
    const param = {
      username: form.username,
      password: form.password,
      uuId: form.uuid,
      code: form.code,
    }
    let res = await doLogin(param)
    console.log(res)
    localStorage.setItem("token", res.data.token)
    await router.push("/index");
    if (form.rememberMe) {
      saveUserInfo();
    } else {
      removeUserInfo();
    }

  }else {
    // 注册业务
    let res = await register(form);
    if (res.code === 200) {
      message.success("注册成功")
      props.currentBtn = false
    }
  }
};
/**
 * 保存用户信息
 */
const saveUserInfo = () => {
  localStorage.setItem("username", form.username);
  // localStorage.setItem("password", encrypt(form.password));
  localStorage.setItem("password", form.password);
  localStorage.setItem("rememberMe", form.rememberMe);
};
/**mo
 * 移除用户信息
 */
const removeUserInfo = () => {
  localStorage.removeItem("username");
  localStorage.removeItem("password");
  localStorage.removeItem("rememberMe");
};
const codeUrl = ref("");
const codeTime = ref(60);
const time = ref(null)
function setTime (){
  time.value = setTimeout(() => {
    codeTime.value--;
    console.log(codeTime.value)
    setTime()
    if (codeTime.value === 0) {
      console.error(codeTime.value)
      clearTimeout(time.value)
    }
  },1000)

}
const getCode = async () => {
  codeTime.value = 60
  let res = await getCodeImg()
    codeUrl.value = "data:image/gif;base64," + res.data.imageUrl;
    form.uuid = res.data.uuid;
   setTime()
};
const props = defineProps({
  currentBtn: {
    type: Boolean,
  },
});
watch(
    () => props.currentBtn,
    (newVal) => {
      form.username = "";
      form.password = "";
    }
);

</script>
<style scoped lang="less">
.login-form {
  margin-top: 20px;

  .form {
    width: 100%;
    height: 100%;
    padding: 20px;

    .form-item {
      margin-bottom: 24px;
    }

    .login-btn {
      width: 100%;
    }
  }
}
.code-warp {
  width: 38%;
  height: 30px;
  display: flex;
  .code-img {
    width: 80%;
    height: 30px;

  }
  .img-loading {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
